<!-- 私有组件 组件标题 -->
<template>
  <el-collapse v-if="!isShowFuscreen" v-model="activeNames" acc class="newCOpse">
    <el-collapse-item :name="title">
      <template slot="title">
        <i class="item_icon" />{{ title }}
      </template>
      <div class="content-box">
        <!-- 全屏icon 按钮 -->
        <i class="el-icon-full-screen" @click="fullScreen" />
        <slot />
      </div>
    </el-collapse-item>
  </el-collapse>
  <!-- 新页面打开 不显示icon 和三角 -->
  <div v-else class="main">
    <div class="content-title">
      <div class="content-title-icon" />
      <div class="show-title">{{ title }}</div>
    </div>
    <div class="content-box-second">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
    name: 'TCollapse',
    props: {
        // 标题
        title: {
            type: String,
            default: '标题'
        },
        // 路由路径
        routerPath: {
            type: String,
            default: ''
        },
        // 页面进来带的参数
        urlData: {
            type: Object,
            default: () => ({ })
        },
        isShowFuscreen: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 默认展开
            activeNames: [this.title]
        }
    },
    methods: {
        // 全屏加载跳转到新页面
        fullScreen() {
            // 跳转全屏页面需要携带的参数
            const result = this.analyticalTransmission(this.urlData)
            window.open(`${process.env.VUE_APP_ZHONGRUAN_URL}${this.routerPath}?${result}&up=0`, '_blank')
        },
        // 解析对象并按照浏览器传参形式传递
        analyticalTransmission(obj) {
            // 过滤掉值为undefined的属性
            const filteredObj = Object.entries(obj).reduce((acc, [key, value]) => {
                if (value !== undefined) {
                    acc[key] = value
                }
                return acc
            }, {})

            // 序列化为查询字符串
            const queryString = Object.keys(filteredObj)
                .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(filteredObj[key])}`)
                .join('&')

            return queryString
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    width: 100%;

    .content-title {
        width: 100%;
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        .content-title-icon {
            width: 6px;
            background: rgb(235, 75, 75);
            height: 15px;
            margin-right: 10px;
            border-radius: 10px;
        }
    }

    .content-box-second {
        width: 100%;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 400;
        line-height: 0;
        padding: 0 20px;
    }
}

.el-collapse {
    margin-bottom: 15px;
    border: 1px solid #ebeef5;
}

.item_icon {
    width: 6px;
    background: rgb(235, 75, 75);
    height: 15px;
    margin-right: 10px;
    border-radius: 10px;
}

.content-box {
    width: 100%;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
}

::v-deep .el-collapse-item {
    box-shadow: none;
    /* 调整各个item之间的距离为20px */
    /* border: 1px; */
}

.newCOpse {
    position: relative;
}

.el-icon-full-screen {
    font-size: 24px;
    color: red;
    position: absolute;
    right: 30px;
    top: 10px;
    cursor: pointer;
}
</style>
